{% extends 'base.html' %}

{% block page-content %}
    <div class="container">
        <div class="row" style="margin-top: 20px">
            <div class="col-xs-12">
                <div class="panel panel-green">
                    <div class="panel-heading">我上传的数据</div>
                    <div class="panel-body pan">
                        <div class="box text-shadow">
                            <table class="demo-tbl">

                                <tr class="tbl-item" v-for="(item,index) in dataList">

                                    <td class="img" style="width: 80px"><img style="width: 80px"
                                                                             :src="item.CoverChart"
                                                                             alt=""
                                                                             title=""/>
                                    </td>

                                    <td class="td-block">
                                        <p class="date">[[item.CreateDatetime]]</p>
                                        <p class="title">[[item.Title]]</p>
                                        <p class="desc">[[item.Content]]</p>
                                        <p class="like"><i class="fa fa-download"></i>&nbsp;&nbsp;[[item.HotValue]]</p>
                                    </td>
                                    <td style="width: 100px">
                                        <p><a :href="item.SourceFile"><i class="ace-icon fa fa-download bigger-110"></i>
                                            下载</a></p>
                                         <p style="margin-top: 10px"><a href="#"><i class="ace-icon fa fa-trash-o bigger-110"></i>
                                             删除</a></p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--分页-->
                        <div style="margin-top: 20px">
                            <pageination :total="model.total" :size="model.size" :page="model.page"
                                         :changge="pageFn"></pageination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}


{% block page-scripts %}
    <script src="/static/js/pageination.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data: {
                dataList: [],
                searchName: "",
                errormessage: "",
                model: {
                    total: 0,//总页数
                    size: 8,//每页显示条目个数不传默认10
                    page: 1,//当前页码
                }
            },
            created() {
                this.getDataList();
            },
            methods: {
                //获取数据
                async getDataList() {
                    let data = {
                        UserID: '', searchName: this.searchName, curPage: this.model.page,
                        pageSize: this.model.size
                    };
                    let res = await axiospost("{% url 'my_data' %}", data);
                    console.log(res);
                    if (res.code == 200) {
                        this.dataList = res.data.items;
                        this.model.total = res.data.sumNum;
                    }
                },

                //页码切换执行方法
                pageFn(val) {
                    this.model.page = val;
                    this.getDataList();
                },
            }
        })
    </script>


{% endblock %}

{% block page-styles %}
    <style>
        form {
            font-size: 12pt;
        }

        .pageination_align {
            text-align: center
        }

        .pageination {
            color: #48576a;
            font-size: 12px;
            display: inline-block;
            user-select: none;
        }

        .pagination_page {
            padding: 0 4px;
            border: 1px solid #d1dbe5;
            border-right: 0;
            background: #fff;
            font-size: 20px;
            min-width: 35px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            float: left;
        }

        .pagination_page_right {
            border-right: 1px solid #d1dbe5;
        }

        .pagination_page:hover {
            color: #20a0ff;
        }

        .disabled {
            color: #e4e4e4 !important;
            background-color: #fff;
            cursor: not-allowed;
        }

        .pagination_page_active {
            border-color: #20a0ff;
            background-color: #20a0ff;
            color: #fff !important;;
            cursor: default;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="/static/vendors/jplist/html/css/jplist-custom.css">

{% endblock %}